 ul {
    width: 60%;
    margin: auto;
    padding: 0;
    list-style: none;
}
li {
    margin: .5em 0;
}
a {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: row nowrap;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -webkit-box-align: baseline;
    -webkit-align-items: baseline;
    -ms-flex-align: baseline;
    align-items: baseline;
    text-decoration: none;
    -webkit-transition: color .2s ease-in-out;
    transition: color .2s ease-in-out;
}
a::before {
    height: .1em;
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    -webkit-box-ordinal-group: 2;
    -webkit-order: 1;
    -ms-flex-order: 1;
    order: 1;
    background: left bottom/contain repeat-x url();
    content: '';
}
a::after {
    -webkit-box-ordinal-group: 3;
    -webkit-order: 2;
    -ms-flex-order: 2;
    order: 2;
    content: "p." attr(data-page);
}
a:hover,
a:focus {
    color: black;
}
/* misc */

html,
body {
    height: 100%;
}
body {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    background: #3498db;
    color: white;
    font: 1.5em/1.4 "lato";
    font-weight: 300;
}
a {
    color: inherit;
}